<template>
  <div id="app-container" style="padding: 30px">
    <el-form :model="minelist" :rules="rules" ref="mine" label-width="130px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="矿井名称" prop="mineName">
            <el-input v-model="mine.mineName"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="瓦斯等级" prop="mineGasGrade">
            <div class="block">
              <el-select v-model="mine.mineGasGrade" clearable placeholder="请选择">
                <el-option :value="1" label="高瓦斯矿井"/>
                <el-option :value="2" label="低瓦斯矿井"/>
              </el-select>
            </div>

          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="设计能力" prop="mineDesignPower">
            <el-input v-model="mine.mineDesignPower"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投产日期" prop="mineProductionTime">
            <template>
              <div class="block">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="mine.mineProductionTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="改造能力" prop="mineReformPower">
            <el-input v-model="mine.mineReformPower"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="改造日期" prop="mineReformTime">
            <template>
              <div class="block">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="mine.mineReformTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注描述" prop="mineRemark">
            <el-input v-model="mine.mineRemark" :rows="10" type="textarea"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" :offset="5">
          <el-form-item>
            <el-button :disabled="saveBtnMine" type="primary" @click="saveMine('mine')">保存</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" @click="closed">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import mine from '@/api/mes/mine'

  export default {
    data() {
      return {
        saveBtnMine: false,
        minelist: null,
        mine: {},
        rules: {}
      }
    },
    methods: {
      saveMine() {
        mine.add(this.mine)
          .then(response => {
            // ## 消息提示
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.$router.push('/basis/list')
          })
      },
      closed() {
        this.$router.push('/basis/list')
      }
    }
  }
</script>
